<template>
  <div class="person">
    <h1>当水温达到60度，或水位达到80cm时，给服务器发请求</h1>
    <h2>当前水温:{{ temp }}摄氏度</h2>
    <h2>当前水位:{{ height }}cm</h2>
    <button @click="changeTemp">水温+10</button>
    <button @click="changeHeight">水位+10</button>
  </div>
</template>

<script lang="ts" setup name="Person">
import { ref, watch, watchEffect } from "vue";

let temp = ref(0);
let height = ref(0);

function changeTemp() {
  temp.value += 10;
}

function changeHeight() {
  height.value += 10;
}

// 使用watch
// watch([temp, height], (newVal) => {
//   let [newTemp, newHeight] = newVal;
//   if (newTemp >= 60 || newHeight >= 80) {
//     alert("发送请求");
//   }
// });

// watchEffect
watchEffect(() => {
  if (temp.value >= 60 || height.value >= 80) {
    alert("发送请求");
  }
});




</script>

<style>
.person {
  width: 100%;
  background-color: skyblue;
}
</style>
